import React, { Component } from 'react';
import req from '@/http/request';
import url from '@/config/url'
import { Map, MapvglView, MapvglLayer } from 'react-bmapgl'

class Index extends Component {
    state = {
        point: []
    }
    render() {
        console.log('render');
        //BMapGL 需要设置window,否则报错 
        return (
            <Map
                center={new window.BMapGL.Point(116.404449, 39.914889)}
                zoom={10}
                enableScrollWheelZoom
            >
                <MapvglView effects={['bright']}>
                    <MapvglLayer
                        type="PointLayer"
                        data={this.state.point}
                        options={{
                            blend: 'lighter',
                            size: 20,
                            color: 'rgb(255, 53, 0, 0.8)'
                        }}
                    />
                </MapvglView>
            </Map>
        )
    }
    componentDidMount() {
        req.get(url.cinemaShow).then(res => {
            console.log(res);
            let pointData= [];
            res.data.paginate.slice(0,100).forEach((item) => {
                //console.log(item);
                pointData.push({
                    geometry: {
                        type: 'Point',
                        coordinates: [item.gpsaddress.split(',')[0]*1, item.gpsaddress.split(',')[1]*1]
                    }
                });
            })
            console.log(pointData);
            this.setState({
                point: pointData
            })
        })


    }
}

export default Index

